<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <!-- 引入element样式 -->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
    </head>
    <style>
    .el-dropdown-link {
        cursor: pointer;
        color: white;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
<body>
    <div id="app" style="height:650px; width: 100%">
            <div class="block">
                <span class="demonstration">时间筛选:  </span>
                <el-select v-model="type" placeholder="请选择" @change="getDate()">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker v-if="type == 2"
                        v-model="date"
                        value-format="yyyy-MM-dd"
                        :default-value="defaultDate"
                        type="date"
                        placeholder="请选择,精准到日期">
                </el-date-picker>
                <el-date-picker v-if="type == 1"
                        v-model="date"
                        value-format="yyyy-MM-dd HH"
                        type="datetime"
                        :default-value="defaultDate"
                        placeholder="请选择,精准到小时"
                        default-time="12:00:00">
                </el-date-picker>
                <el-date-picker v-if="type == 0"
                        v-model="date"
                        type="datetime"
                        :default-value="defaultDate"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="请选择,精准到分钟">
                </el-date-picker>
                <el-date-picker v-if="type == 3"
                        v-model="date"
                        :default-value="defaultDate"
                        value-format="yyyy-MM"
                        type="month"
                        placeholder="请选择,精准到月份">
                </el-date-picker>
                <el-date-picker v-if="type == 4"
                        v-model="date"
                        type="year"
                        default-value="2020"
                        value-format="yyyy"
                        placeholder="请选择,精准到年份">
                </el-date-picker>
                <el-select
                        filterable
                        @change="getMeterIds"
                        v-model="meterIds"
                        multiple
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="请选择仪表">
                    <el-option
                            v-for="item in counters"
                            :key="item.meterId"
                            :label="item.meterName"
                            :value="item.meterId">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="queryStatistics">查询统计</el-button>
<!--                <el-button type="primary" v-show="type == 2" @click="exportExcel">导出报表</el-button>-->
                <el-dropdown @command="handleCommand" @click="exportExcel" type="primary" split-button v-show="type == 2">
                    <span class="el-dropdown-link">
                    导出计数器数据
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">指定计数器</el-dropdown-item>
                        <el-dropdown-item command="b">全部计数器</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        <div id="mychars" style="height: 600px; width: 100%"></div>
    </div>
</body>
<!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/echarts.min.js"></script>
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isCollapse: true,
            defaultDate : new Date(),
            defaultYear : new Date(),
            defaultMonth : new Date(),

            type:2,
            date:'',
            seconds:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19',
                '20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39',
                '40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60秒'],
            minutes:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19',
                '20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39',
                '40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60分'],
            hours:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19',
                '20','21','22','23','24时'],
            days:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19',
                '20','21','22','23','24','25','26','27','28', '29','30', '31日'],
            months:['1','2','3','4','5','6','7','8','9','10','11','12月'],
            counters:[],
            meterIds:[],
            myChart:'',
            options: [{
                value: 0,
                label: '分钟'
            }, {
                value: 1,
                label: '小时'
            }, {
                value: 2,
                label: '天数'
            }, {
                value: 3,
                label: '月份'
            },{
                value: 4,
                label: '年份'
            }],
            option : {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data:  []
                    },
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        areaStyle: {},
                        type: 'line',
                    },
                    {
                        areaStyle: {},
                        type: 'line',
                    },
                    {
                        areaStyle: {},
                        type: 'line',
                    },
                    {
                        areaStyle: {},
                        type: 'line',
                    },
                    {
                        areaStyle: {},
                        type: 'line',
                    }
                ]
            }
        },
        created:function(){
            var now = new Date();
            this.handleDefaultDate();
            this.findAllCounters();
        },
        mounted: function() {
            this.initCharts();
        },
        watch:{
            option:{
                handler: function(newVal, oldVal) {
                    if (this.myChart) {
                        if (newVal) {
                            this.myChart.setOption(newVal, true);
                        } else {
                            this.myChart.setOption(oldVal, true);
                        }
                    } else {
                        this.initCharts();
                    }
                },
                deep: true
            },
        },
        methods: {
            choosePath:function() {
                var file = document.getElementById('file')
                file.click();
            },
            handleDefaultDate : function() {
                var format = "";
                if (this.type == 2) {
                    format = "yyyy-MM-dd";
                } else if (this.type == 1) {
                    format = "yyyy-MM-dd HH";
                } else if (this.type == 0) {
                    format = "yyyy-MM-dd HH:mm";
                } else if (this.type == 3) {
                    format = "yyyy-MM";
                } else if (this.type == 4) {
                    format = "yyyy";
                } else {
                    this.date = "";
                }
                if (format) {
                    var now = new Date();
                    var dateStr = this.dateFormat(format, now);
                    this.date = dateStr;
                }

            },
            dateFormat : function(fmt, date) {
                var ret;
                var opt = {
                    "y+": date.getFullYear().toString(),        // 年
                    "M+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "m+": date.getMinutes().toString(),         // 分
                    "s+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    };
                };
                return fmt;
            },
            handleCommand:function(command) {
                var self = this;
                console.log(command)
                if (command == 'b') {
                    const ids = [];
                    for(var i = 0; i < self.counters.length; i++) {
                        ids.push(self.counters[i].meterId);
                    }
                    self.meterIds = ids;
                }
                if (self.date == '') {
                    self.$message({
                        showClose: true,
                        message: '请选择相关时间段',
                        type: 'error'
                    });
                    return ;
                }
                if (self.meterIds.length == 0) {
                    self.$message({
                        showClose: true,
                        message: '请选择相关的仪表',
                        type: 'error'
                    });
                    return ;
                }
                this.exportExcel();
            },
            getDate: function(val){
                this.handleDefaultDate();
                // this.date = '';
            },
            // 初始化图表
            initCharts: function() {
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById('mychars'));
                this.myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(this.option,true, true);
            },
            queryStatistics:function() {
                var self = this;
                // 获取到所有的计数器
                if (self.date == '') {
                    self.$message({
                        showClose: true,
                        message: '请选择相关时间段',
                        type: 'error'
                    });
                    return ;
                }

                if (self.meterIds.length == 0) {
                    self.$message({
                        showClose: true,
                        message: '请选择相关的仪表',
                        type: 'error'
                    });
                    return ;
                }
                // 获取到所有的计数器
                axios.post('http://localhost:8032/device/curveStatistics',{"type": self.type, "date": self.date, meterIds: self.meterIds.join(",")}).then(function (res) {
                    if (res.data.code == true) {
                        self.option.series = res.data.data;
                        if (self.type == 0) {
                            self.option.xAxis[0].data = self.seconds;
                        }
                        if (self.type == 1) {
                            self.option.xAxis[0].data = self.minutes;
                        }
                        if (self.type == 2) {
                            self.option.xAxis[0].data = self.hours;
                        }
                        if (self.type == 3) {
                            self.option.xAxis[0].data = self.days;
                        }
                        if (self.type == 4) {
                            self.option.xAxis[0].data = self.months;
                        }
                    } else {
                        self.option.series = [];
                        if (self.type == 0) {
                            self.option.xAxis[0].data = self.seconds;
                        }
                        if (self.type == 1) {
                            self.option.xAxis[0].data = self.minutes;
                        }
                        if (self.type == 2) {
                            self.option.xAxis[0].data = self.hours;
                        }
                        if (self.type == 3) {
                            self.option.xAxis[0].data = self.days;
                        }
                        if (self.type == 4) {
                            self.option.xAxis[0].data = self.months;
                        }
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
                self.initCharts();
            },
            getMeterIds:function (val) {
                console.log(this.meterIds[0]);
            },
            // 获取到所有的仪表
            findAllCounters: function() {
                var self = this;
                // 获取到所有的计数器
                axios.post('http://localhost:8032/device/findAlls').then(function (res) {
                    if (res.data.code == true) {
                        self.counters = res.data.data;
                        if (self.counters && self.counters.length > 0) {
                            self.meterIds = [self.counters[0].meterId];
                        }
                    } else {
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            exportExcel:function () {
                var self = this;
                // 获取到所有的计数器
                if (self.date == '') {
                    self.$message({
                        showClose: true,
                        message: '请选择相关时间段',
                        type: 'error'
                    });
                    return ;
                }
                if (self.meterIds.length == 0) {
                    self.$message({
                        showClose: true,
                        message: '请选择相关的仪表',
                        type: 'error'
                    });
                    return ;
                }
                axios({
                    method: 'post',
                    url:'http://localhost:8032/device/exportCurve',
                    data: {"type": self.type, "date": self.date, meterIds: self.meterIds.join(",")},
                    responseType: 'blob'
                }).then(res=>{
                    // const link = document.createElement('a');
                    // let blob = new Blob([res.data], {type: 'application/octet-stream'})
                    // link.style.display = 'none'
                    // link.href = URL.createObjectURL(blob)
                    // // link.download = res.headers['content-disposition'] //下载后文件名
                    // // 下载的文件名
                    // link.download = "计数器上排值折线统计报表.xlsx"
                    // document.body.appendChild(link)
                    // link.click()
                    // document.body.removeChild(link)
                    self.$message({
                        showClose: true,
                        message: '请稍后到C盘的counter文件夹下查看',
                        type: 'success'
                    });
                }).catch(err=>{
                    self.$message({
                        showClose: true,
                        message: '导出文档失败',
                        type: 'error'
                    });
                })
            }
        }
    })
</script>
</html>